﻿
@{
    ViewBag.Title = "报表";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<ol class="breadcrumb">
    <li><span class="glyphicon glyphicon-home">@Html.ActionLink("首页","Index","Scan")</span></li>
    <li class="active">@Html.ActionLink("报表","Export","Scan")</li>
</ol>
@Html.Raw(ViewBag.Message)


@*<div class="panel panel-default">
    <div class="panel-heading">
        <div class="panel-title"><span class="glyphicon glyphicon-user"></span>查询条件</div>
    </div>
    <div class="panel-body">
        <div class="panel-body">
            <div class="panel-group">
                <div class="from-group pull-left">
                    <span>时间范围：</span>@Html.TextBox("startDate", "", new { @class = "trade-time wid153", @onClick = "WdatePicker({maxDate:'#F{$dp.$D(\\'endDate\\')}'})" })
                </div>
                <div class="from-group pull-left">
                    <span style="text-align:left;width:25px;">--</span>
                    @Html.TextBox("endDate", "", new { @class = "trade-time wid153", @onClick = "WdatePicker({minDate:'#F{$dp.$D(\\'startDate\\')}'})" })
                </div>
                <div class="from-group pull-left">
                    <input type="radio" name="exp" id="rdi_wei"  class="btn btn-info  btn-sm rightSize" value="1" checked="checked" >未导出
                    <input type="radio" name="exp" id="rdi_yi"  class="btn btn-info  btn-sm rightSize" value="2">已导出
                    <input type="radio" name="exp" id="rdi_all"  class="btn btn-info  btn-sm rightSize" value="3">全部
                </div>
                <div class="from-group pull-left">
                    <button type="button" class="btn btn btn-info search"> <i class="glyphicon glyphicon-search"></i> 搜索</button>
                </div>
            </div>
        </div>
    </div>
</div>*@

@*<div id="dateSearch">
    <span><strong>开始日期: </strong></span>
    <input type="text" class="laydate-icon startDate" placeholder="开始日期">
    <span><strong>结束日期: </strong></span>
    <input type="text" class="laydate-icon endDate" placeholder="结束日期">
    <span><strong>用户ID: </strong></span>
    <input type="text" class="default-input form-control imuserid" placeholder="请输入用户id">
    
</div>*@

@*<div class="btn-group from-group pull-left">
         <button class="btn btn-default">Action</button> <button data-toggle="dropdown" class="btn btn-default dropdown-toggle"><span class="caret"></span></button>
         <ul class="dropdown-menu">
             <li>
                 <a href="#">操作</a>
             </li>
             <li class="disabled">
                 <a href="#">另一操作</a>
             </li>
             <li class="divider">
             </li>
             <li>
                 <a href="#">其它</a>
             </li>
         </ul>
     </div>
    <div class="dropdown">
                        <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
                            Dropdown Example
                            <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu">
                            <li><a href="#">HTML</a></li>
                            <li><a href="#">CSS</a></li>
                            <li><a href="#">JavaScript</a></li>
                        </ul>
                    </div>
    @Html.DropDownList("未导出") , new { htmlAttributes = new { @class = "form-control" } }
         <span class="btn-group dropup">
                             <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"></button>
                             <ul class="active">
                                 <li class="active"><a>未导出</a></li>
                                 <li class="active"><a>已导出</a></li>
                                 <li class="active"><a>全部</a></li>
                             </ul>
                         </span>
*@
   

<div class="tab-content" id="tabContent">
    <div id="toolbar" class="pull-left"  style="margin-top:1.5em">
        <span class="pull-left"><strong>导出类型：</strong></span>
        <div class="from-group pull-left" style="margin-right:2em;position:relative">
            <input type="radio" name="exp" id="rdi_wei" class="radio_false_disable rightSize" value="1" checked="true"><span><strong>未导出</strong></span>
            <input type="radio" name="exp" id="rdi_yi" class="radio_false_disable rightSize" value="2"><span><strong>已导出</strong></span>
            <input type="radio" name="exp" id="rdi_all" class="radio_false_disable  rightSize" value="3"><span><strong>全部</strong></span>
        </div>
        <div class="from-group pull-left" style="margin-right:2em;position:relative">
            <span><strong>时间范围：</strong></span>
            @Html.DropDownList("selectedRang", new SelectList(new List<SelectListItem>
            {
                new SelectListItem { Selected = true,Text = "本周",Value = "0"},
                new SelectListItem { Selected = false,Text = "本月",Value = "1"},
                new SelectListItem { Selected = false,Text = "半年",Value = "2"},
                new SelectListItem { Selected = false,Text = "自选",Value = "3"},
            }, "Value", "Text"))
        </div>
        <button type="button" id="btn_refresh" class="btn btn-sm btn-default pull-left glyphicon glyphicon-search" style="margin-top:-0.3em;text-align:initial"><strong>条件查询</strong></button>
    </div>
    <table id="codegrid"></table>
</div>
@section style{
    @Styles.Render("~/Content/bootstrapplugincss")
}
@section scripts{
    @Scripts.Render("~/bundles/jqueryval")
    @Scripts.Render("~/bundles/bootstrapplugin")
    <script type="text/javascript">
        var starDate, endDate;

        var queryParams = function (params) {
            var sltval = $("#selectedRang").val();
            switch (sltval) {
                case "0":
                    starDate = moment().subtract(7, 'days').format("l");
                    endDate = moment().format("l");
                    break;
                case "1":
                    starDate = moment().subtract(1, 'months').format("l");
                    endDate = moment().format("l");
                    break;
                case "2":
                    starDate = moment().subtract(0.5, 'years').format("l");
                    endDate = moment().format("l");
                default:
            }
            var param = {
                StartDate: starDate,
                EndDate: endDate,
                SearchIndex: $("input[name='exp']:checked").val()
            };
            return param;
        }

        var addDialog = new BootstrapDialog({
            title: "<span class='glyphicon glyphicon-plus'></span>选择时间段",
            message: function (dialog) {
                var $message = $('<div></div>');
                var pageToLoad = dialog.getData('pageToLoad');
                $message.load(pageToLoad);
                return $message;
            },
            data: {
                'pageToLoad': '@Url.Action("DateRange")'
            },
            buttons: [{
                icon: "glyphicon glyphicon-plus",
                label: "提交",
                action: function (dialogItself) {
                    starDate = $("#startDate").val();
                    endDate = $("#endDate").val();
                    if (starDate == "" || endDate == "")
                    {
                        $("#selectedRang").val("0");
                    }
                    dialogItself.close();
                }
            }, {
                icon: "glyphicon glyphicon-remove",
                label: "关闭",
                action: function (dialogItself) {
                    $("#selectedRang").val("0");
                    dialogItself.close();
                }
            }]
        });

        $(document).ready(function () {
            var $table = $('#codegrid');
            //表格开始
            $table.bootstrapTable({
                showRefresh: true,
                showColumns: true,
                pagination: true,
                showFooter: true,
                striped: true,
                method: "post",
                dataType: "json",
                toolabr:"#toolbar",
                sortable: false,                    //是否启用排序
                sortOrder: "asc",                   //排序方式
                pageList: "[5,10,20,50,100]",
                url: "@Url.Action("CodeListJson")",
                queryParams: queryParams,//传递参数（*）
                clickToSelect: true,
                search: false,                       //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
                strictSearch: true,
                showExport: true,                     //是否显示导出
                exportDataType: "basic",              //basic', 'all', 'selected'.
                columns:[
                    {title:"ID",field:"CodeId"},
                    {title:"二维码",field:"CodeCont"},
                    {title:"扫描时间",field:"CreatTime",formatter:function(value){return moment(value).format("YYYY-MM-DD HH:mm:ss")}},
                    {title:"导出时间",field:"ExportTime",formatter:function(value){return value==null? "未导出":moment(value).format("YYYY-MM-DD HH:mm:ss")}},
                    { title: "操作", field: "CodeId", formatter: function (value) { return "<a class='btn btn-sm btn-danger' data-operation='deletecode' data-value='" + value + "'>删除</a>" } }
                ],
                onLoadSuccess: function () {
                    //删除按钮
                    $("a[data-operation='deletecode']").click(function () {
                        var id = $(this).attr("data-value");
                        BootstrapDialog.confirm("你确定要删除【" + $(this).parent().parent().find("td").eq(1).text() + "】吗？\n建议尽可能不要删除数据。", function (result) {
                            if (result) {
                                $.post("@Url.Action("Delete","Scan")", { id: id }, function (data) {
                                    if (data.Code == 1) {
                                        BootstrapDialog.show({
                                            message: "删除数据",
                                            buttons: [{
                                                icon: "glyphicon glyphicon-ok",
                                                lable: "确定",
                                                action: function (dialogItself) {
                                                    $table.bootstrapTable("refresh");
                                                    dialogItself.close();
                                                }
                                            }]
                                        });
                                    }
                                    else BootstrapDialog.alert(data.Message);
                                }, "json");
                            }
                        });
                    });
                    //删除按钮结束
                }
            });

            $('#selectedRang').change(function () {
                if ($("#selectedRang").val() == "3") {
                    addDialog.open();
                }
            });
            $("#btn_refresh").click(function () {
                $table.bootstrapTable("refresh");
            });
        });

    </script>
    @Scripts.Render("~/bundles/tableExportplugin")
}